import React, { Component } from 'react';
import {
  Card,
  Button,
  Row,
  Col,
  Icon,
  Tabs,
  Table,
  Radio,
  DatePicker,
  Tooltip,
  Menu,
  Dropdown,
  Avatar,
  Input,
  Carousel,
  Rate,
} from 'antd';
import { connect } from 'dva';
const { MonthPicker, RangePicker } = DatePicker;
import GridContent from '@/components/PageHeaderWrapper/GridContent';
import numeral from 'numeral';
import { formatMessage, FormattedMessage } from 'umi/locale';
import moment from 'moment';


import {
  ChartCard,
  MiniArea,
  MiniBar,
  MiniProgress,
  Field,
  Bar,
  Pie,
  TimelineChart,
} from '@/components/Charts';

const { Meta } = Card;

import Trend from '@/components/Trend';
import styles from './Home.less';

const { dayBtn } = styles;

import { getValueWithLocalStorage } from '@/utils/authority';

const namespace = 'dashboardhome';

const userInfo = getValueWithLocalStorage('userinfo');
import config from '../../../config/web.config'

import shopInfo from  '../../utils/LoginUserUtil'

const mapStateToProps = state => {
  const cardList = state[namespace].data;
  const ayalysisData = state[namespace].ayalysisData;
  return {
    cardList,
    ayalysisData,
  };
};

const mapDispatchToProps = dispatch => {
  return {
    onClickAdd: newCard => {
      const action = {
        type: `${namespace}/addNewCard`,
        payload: newCard,
      };
      dispatch(action);
    },

    getHomeAnalysisData: (_start, _end, _type, _owner) => {
      const action = {
        type: `${namespace}/getHomeAnalysisData`,
        payload: {
          start: _start,
          end: _end,
          type: _type,
          owner: _owner,
        },
      };

      dispatch(action);
    },
  };
};

@connect(
  mapStateToProps,
  mapDispatchToProps
)
export default class Analysis extends Component {
  constructor(props) {
    super(props);
    this.state = {
      start: moment().format('YYYY-MM-DD'),
      end: moment().format('YYYY-MM-DD'),
      loading: false,
    };
  }

  componentDidMount() {
    this.reloadData();
  }

  reloadData() {
    this.props.getHomeAnalysisData(this.state.start, this.state.end, '5', userInfo.tel);
  }

  render() {
    const dateFormat = 'YYYY-MM-DD';

    return (
        <Card title={'统计信息'} className={styles.shop}>
          {/* <Button onClick={this.getBackupData}>获取备份数据</Button> */}

          <Row gutter={24}>
            <Col span={6}>
              <RangePicker
                defaultValue={[moment(this.state.start, dateFormat), moment(this.state.end, dateFormat)]}
                onOk={value => {
                  console.log('onOk: ', value);
                }}
                onChange={(date, dateString) => {
                  this.setState({
                    start: dateString[0],
                    end: dateString[1],
                  });
                }}
              />
            </Col>
            <Col span={4}>
              <div className={styles.dayBtn}>
                <Button
                  type="primary"
                  onClick={() => {
                    this.reloadData();
                  }}
                >
                  查询
                </Button>
              </div>
            </Col>
          </Row>

          <p className={styles.sectionTip}>工单统计</p>

          <Row gutter={24}>
            <Col span={6}>
              <Card title="新增开单" bordered={true}>
                <span className={styles.numStyle}>{this.props.ayalysisData == undefined ? 0 : this.props.ayalysisData.num2}</span>
              </Card>
            </Col>
            <Col span={6}>
              <Card title="工单金额" bordered={true}>
                <span className={styles.numStyle}>{this.props.ayalysisData == undefined ? 0 : this.props.ayalysisData.num5}</span>
              </Card>
            </Col>
            <Col span={6}>
              <Card title="工时支出" bordered={true}>
                <span className={styles.numStyle}>{this.props.ayalysisData == undefined ? 0 : this.props.ayalysisData.num11}</span>
              </Card>
            </Col>
            <Col span={6}>
              <Card title="实际利润" bordered={true}>
                <span className={styles.numStyle}>{this.props.ayalysisData == undefined ? 0 : this.props.ayalysisData.num6}</span>
              </Card>
            </Col>
          </Row>

          <p className={styles.sectionTip}>客户统计</p>

          <Row gutter={24}>
            <Col span={6}>
              <Card title="新增客户" bordered={true}>
                <span className={styles.numStyle}>{this.props.ayalysisData == undefined ? 0 : this.props.ayalysisData.num1}</span>
              </Card>
            </Col>
            <Col span={6}>
              <Card title="新增预约" bordered={true}>
                <span className={styles.numStyle}>{this.props.ayalysisData == undefined ? 0 : this.props.ayalysisData.num3}</span>
              </Card>
            </Col>
            <Col span={6}>
              <Card title="挂帐统计" bordered={true}>
                <span className={styles.numStyle}>{this.props.ayalysisData == undefined ? 0 : this.props.ayalysisData.num8}</span>
              </Card>
            </Col>
            <Col span={6}>
              <Card title="减免统计" bordered={true}>
                <span className={styles.numStyle}>{this.props.ayalysisData == undefined ? 0 : this.props.ayalysisData.num9}</span>
              </Card>
            </Col>
          </Row>

          <p className={styles.sectionTip}>会员统计</p>

          <Row gutter={24}>
            <Col span={6}>
              <Card title="新增开卡" bordered={true}>
                <span className={styles.numStyle}>{this.props.ayalysisData == undefined ? 0 : this.props.ayalysisData.num7}</span>
              </Card>
            </Col>
            <Col span={6}>
              <Card title="充值收入" bordered={true}>
                <span className={styles.numStyle}>{this.props.ayalysisData == undefined ? 0 : this.props.ayalysisData.num4}</span>
              </Card>
            </Col>
          </Row>

          <p className={styles.sectionTip}>库存统计</p>
          <Row gutter={24}>
            <Col span={6}>
              <Card title="采购支出" bordered={true}>
                <span className={styles.numStyle}>{this.props.ayalysisData == undefined ? 0 : this.props.ayalysisData.num10}</span>
              </Card>
            </Col>
            <Col span={6}>
              <Card title="退货回款" bordered={true}>
                <span className={styles.numStyle}> {this.props.ayalysisData == undefined ? 0 : this.props.ayalysisData.num12}</span>
              </Card>
            </Col>
          </Row>
        </Card>
    );
  }
}
